<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业提交系统</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #f8f9fa; /* 页面背景色 */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* 使页面内容垂直居中 */
            margin: 0;
        }
        .form-container {
            background-color: #ffffff; /* 表单背景色 */
            border: 1px solid #dee2e6; /* 表单边框 */
            border-radius: 10px; /* 圆角 */
            padding: 2rem; /* 内边距 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            max-width: 500px; /* 表单最大宽度 */
            width: 100%; /* 表单宽度 */
        }
        .form-container h1 {
            margin-bottom: 1.5rem; /* 标题与表单的间距 */
            font-size: 1.75rem; /* 标题字体大小 */
            color: #343a40; /* 标题颜色 */
        }
        .form-container .btn {
            margin-top: 1rem; /* 按钮与表单的间距 */
        }
        .form-container .alert {
            margin-top: 1.5rem; /* 提示信息与表单的间距 */
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="form-container">
            <h1 class="text-center">作业提交表单</h1>
            <form @submit.prevent="submitForm">
                <!-- 班级输入框 -->
                <div class="mb-3">
                    <label for="name" class="form-label">班级：</label>
                    <input type="text" id="class" class="form-control" v-model="formData.class" required>
                </div>
                <!-- 姓名输入框 -->
                <div class="mb-3">
                    <label for="name" class="form-label">姓名：</label>
                    <input type="text" id="name" class="form-control" v-model="formData.name" required>
                </div>
                <br>
                <!-- 文件上传按钮 -->
                <div class="mb-3">
                    <label for="file" class="form-label">选择文件：</label>
                    <input type="file" id="file" class="form-control" @change="onFileChange" required>
                </div>

                <!-- 提交按钮 -->
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </form>

            <!-- 显示提交结果 -->
            <div v-if="message">
                <div class="alert" :class="{'alert-success': !message.includes('失败'), 'alert-danger': message.includes('失败')}">
                    {{ message }}
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                formData: {
                    class: '',      // 班级
                    name: '',       // 姓名
                    file: null      // 文件
                },
                message: ''         // 提交结果消息
            },
            methods: {
                // 文件选择事件
                onFileChange(event) {
                    this.formData.file = event.target.files[0]; // 获取选择的文件
                },
                // 提交表单
                submitForm() {
                    const formData = new FormData(); // 创建FormData对象
                    formData.append('class', this.formData.class); // 添加班级
                    formData.append('name', this.formData.name); // 添加姓名
                    formData.append('file', this.formData.file); // 添加文件

                    // 发送POST请求
                    axios.post('http://9.7.0.222:4000/upload', formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data' // 设置请求头
                        }
                    })
                    .then(response => {
                        this.message = '提交成功：' + JSON.stringify(response.data);
                    })
                    .catch(error => {
                        this.message = '提交失败：' + error.message;
                    });
                }
            }
        });
    </script>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>